<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" th:href="@{/backstage/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/backstage/css/admin.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <script th:src="@{/backstage/js/jquery.js}"></script>
    <script th:src="@{/backstage/js/pintuer.js}"></script>

    <!--  bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/../bootstrap/css/bootstrap.min.css}">
    <script type="text/javascript" th:src="@{/../bootstrap/js/bootstrap.min.js}"></script>

    <!--  bs_pagination plugin -->
    <link rel="stylesheet" type="text/css" th:href="@{/../bootstrap/css/jquery.bs_pagination.min.css}">
    <script type="text/javascript" th:src="@{/../bootstrap/js/jquery.bs_pagination.min.js}"></script>
    <script type="text/javascript" th:src="@{/../bootstrap/localization/en.js}"></script>


    <script>
        $(function () {
                //当页面加载完成，查询所有数据的第一页以及所有数据的总条数,默认每页显示5条
                queryArticleByConditionForPage(1, 5);

                //给"全选"按钮添加单击事件
                $("#check-all").click(function () {
                    $("tbody tr td input").prop("checked", this.checked);
                });
                $("tbody").on("click", "tr td input", function () {
                    //如果列表中的所有checkbox都选中，则"全选"按钮也选中
                    if ($("tr td input").size() == $("tr td input:checked").size()) {
                        $("#check-all").prop("checked", true);
                    } else {//如果列表中的所有checkbox至少有一个没选中，则"全选"按钮也取消
                        $("#check-all").prop("checked", false);
                    }
                });

                // 给"添加"按钮添加单击事件
                $("#add-btn").click(function () {
                    window.location.href = "/backstage/article/add";
                });

                // 给"删除"按钮添加单击事件
                $("#del-btn").click(function () {
                    //收集参数
                    //获取列表中所有被选中的checkbox
                    var checkedIds = $("tr td input:checked");
                    if (checkedIds.size() == 0) {
                        alert("必须选中最少一个文章");
                        return;
                    }

                    if (window.confirm("确定删除吗？")) {
                        // 封装参数，将选中的文章的id存在数组arr中
                        var arr = [];
                        checkedIds.each(function (i, n) {
                            arr.push($(this).val());
                        });
                        // 发送请求
                        $.ajax({
                                url: '/backstage/article/del',
                                data: {arr: arr},
                                type: 'post',
                                dataType: 'json',
                                traditional: true,
                                success: function (data) {
                                    analysis(data);
                                }
                            }
                        );
                    }
                });

                // 给"修改"按钮添加单击事件
                $("#edit-btn").click(function () {
                    //收集参数
                    //获取列表中所有被选中的checkbox
                    var checkedIds = $("tr td input:checked");

                    if (checkedIds.size() == 0) {
                        alert("请选择操作对象");
                        return;
                    }
                    if (checkedIds.size() > 1) {
                        alert("只能选中一个文章");
                        return;
                    }
                    // 跳转修改页面
                    window.location.href = '/backstage/article/edit/' + checkedIds.val();
                });

                // 给"置顶"按钮添加单击事件
                $("#sticky-btn").click(function () {
                    //收集参数
                    //获取列表中所有被选中的checkbox
                    var checkedIds = $("tr td input:checked");

                    if (checkedIds.size() == 0) {
                        alert("请选择操作对象");
                        return;
                    }
                    if (checkedIds.size() > 1) {
                        alert("只能选中一个文章");
                        return;
                    }

                    let id = checkedIds.val();
                    // 发送请求
                    $.post(
                        '/backstage/article/sticky',
                        {id: id},
                        function (data) {
                            analysis(data);
                        }
                    );
                });

                // 给"发表"按钮添加单击事件
                $("#issue-btn").click(function () {
                    //收集参数
                    //获取列表中所有被选中的checkbox
                    var checkedIds = $("tr td input:checked");

                    if (checkedIds.size() == 0) {
                        alert("请选择操作对象");
                        return;
                    }
                    if (checkedIds.size() > 1) {
                        alert("只能选中一个文章");
                        return;
                    }

                    let id = checkedIds.val();
                    let font = $("tr td input:checked").parent().parent().children()[6].children[0].innerText;
                    if (font == '已发布') {
                        alert("已发布，无需再发表");
                        return;
                    }
                    // 发送请求
                    $.post(
                        '/backstage/article/edit',
                        {
                            articleId: id,
                            articleState: '1',
                        },
                        function (data) {
                            analysis(data)
                        }
                    );
                });

                // 给"下架"按钮添加单击事件
                $("#cancel-btn").click(function () {
                    //收集参数
                    //获取列表中所有被选中的checkbox
                    var checkedIds = $("tr td input:checked");

                    if (checkedIds.size() == 0) {
                        alert("请选择操作对象");
                        return;
                    }
                    if (checkedIds.size() > 1) {
                        alert("只能选中一个文章");
                        return;
                    }

                    let id = checkedIds.val();
                    let font = $("tr td input:checked").parent().parent().children()[6].children[0].innerText;
                    if (font == '未发布') {
                        alert("未发布，无需下架");
                        return;
                    }
                    // 发送请求
                    $.post(
                        '/backstage/article/edit',
                        {
                            articleId: id,
                            articleState: '0',
                        },
                        function (data) {
                            analysis(data)
                        }
                    );
                });

                // 给"搜索"按钮添加单击事件
                $("#select-btn").click(function () {
                    //查询所有符合条件数据的第一页以及所有符合条件数据的总条数;
                    queryArticleByConditionForPage(1, $("#paginate").bs_pagination('getOption', 'rowsPerPage'));
                });

                // 点击文章内容展示详情
                $("tbody").on("click", ".article-content", function () {
                    let id = $(this).parent().children()[0].children[0].value;
                    $.post('/backstage/article/details', {id, id}, function (data) {
                        $("#articleTitles").text(data.articleTitles);
                        $("#columnId").text(data.columnId);
                        $("#managerId").text(data.managerId);
                        $("#articleCreationDate").text(data.articleCreationDate);
                        $("#articleContent").html(data.articleContent);
                        $("#articleNumber").text(parseInt(data.articleNumber));
                        if (data.articleState == '0') {
                            $("#articleState").text('未发布')
                        } else if (data.articleState == '1') {
                            $("#articleState").text('已发布')
                        }

                        $("#article-details-modal").modal("show");
                    });
                });

                // 分页
                function queryArticleByConditionForPage(pageNo, pageSize) {
                    // 收集参数
                    let state = $("#state").find("option:selected").val();
                    let column = $("#column").find("option:selected").val();
                    let name = $("#name").val().trim();
                    // 发送请求
                    $.ajax({
                        url: '/backstage/article/queryColumnByConditionForPage',
                        data: {
                            state: state,
                            column: column,
                            name: name,
                            pageNo: pageNo,
                            pageSize: pageSize
                        },
                        type: 'post',
                        dataType: 'json',
                        success: function (data) {
                            //取消"全选"按钮
                            $("#check-all").prop("checked", false);

                            let html = "";
                            for (let i = 0; i < data.articles.length; i++) {
                                html += "<tr>"
                                html += "<td><input type='checkbox' value='" + data.articles[i].articleId + "'/></td>"
                                html += "<td>" + data.articles[i].managerId + "</td>"
                                html += "<td>" + data.articles[i].columnId + "</td>"
                                html += "<td>" + data.articles[i].articleTitles + "</td>"
                                html += "<td class='article-content'>" + data.articles[i].articleContent + "</td>"
                                html += "<td>" + data.articles[i].articleCreationDate + "</td>"
                                if (data.articles[i].articleState == '1') {
                                    html += "<td><font color='#00CC99'>已发布</font></td>"
                                } else if (data.articles[i].articleState == '0') {
                                    html += "<td><font color='#ff0000'>未发布</font></td>"
                                }
                                html += "<tr>"
                            }

                            $("#tbody").html(html);

                            //计算总页数
                            let totalPages = 1;
                            if (data.totalRows % pageSize == 0) {
                                totalPages = data.totalRows / pageSize;
                            } else {
                                totalPages = parseInt(data.totalRows / pageSize) + 1;
                            }
                            //对容器调用bs_pagination工具函数，显示翻页信息
                            $("#paginate").bs_pagination({
                                currentPage: pageNo,//当前页号,相当于pageNo
                                rowsPerPage: pageSize,//每页显示条数,相当于pageSize
                                totalRows: data.totalRows,//总条数
                                totalPages: totalPages,  //总页数,必填参数.
                                visiblePageLinks: 5,//最多可以显示的卡片数
                                showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
                                showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
                                showRowsInfo: true,//是否显示记录的信息，默认true--显示
                                //用户每次切换页号，都自动触发本函数;
                                //每次返回切换页号之后的pageNo和pageSize
                                onChangePage: function (event, pageObj) {
                                    queryArticleByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
                                }
                            });
                        }
                    });
                }

                // 解析data
                function analysis(data) {
                    if (data.code == "1") {
                        //刷新列表,保持页号和每页显示条数都不变
                        queryArticleByConditionForPage($("#paginate").bs_pagination('getOption', 'currentPage'), $("#paginate").bs_pagination('getOption', 'rowsPerPage'));
                    } else {
                        //提示信息
                        alert(data.message);
                    }
                }
            }
        );


    </script>
</head>
<body>
<!-- 文章详情模态窗口 -->
<div class="modal fade" id="article-details-modal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                </button>
                <h4 class="modal-title">文章详情</h4>
            </div>
            <div class="modal-body">
                <p class="text-center">
                    栏目:《<span id="columnId"></span>》
                    ，编辑:<span id="managerId"></span>
                    ，创建时间:<span id="articleCreationDate"></span>
                    ，点击量:<span id="articleNumber"></span>
                </p>
                <h3 id="articleTitles" class="text-center"></h3>
                <p><span id="articleContent"></span></p>
                <p><span id="articleState"></span></p>
            </div>
        </div>
    </div>
</div>


<div>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="bi bi-list-ul"> 文章列表</strong></div>
        <div class="padding border-bottom">
            <ul class="search">
                <li>
                    <button id="add-btn" class="button border-main bi bi-plus-square"> 添加</button>
                    <button id="del-btn" class="button border-red bi bi-trash"> 删除</button>
                    <button id="edit-btn" class="button border-yellow bi bi-pencil-square"> 修改</button>
                    <button id="sticky-btn" class="button border-middle bi bi-arrow-up-circle-fill"> 置顶</button>
                    <button id="issue-btn" class="button border-middle bi bi-file-arrow-up-fill"> 发表</button>
                    <button id="cancel-btn" class="button border-middle bi bi-file-arrow-down-fill"> 下架</button>
                </li>
                <li>搜索：</li>
                <li>
                    <select id="state" class="input">
                        <option value="">状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </li>
                <li>
                    <select id="column" class="input">
                        <option value="">分区</option>
                        <option th:value="${column.columnId}" th:text="${column.columnName}"
                                th:each="column:${columns}">/option>
                    </select>
                </li>
                <li>
                    <input id="name" type="text" placeholder="请输入标题关键字" class="input"
                           style="width:250px; line-height:17px;display:inline-block"/>
                    <button id="select-btn" class="button border-main bi bi-search"> 搜索</button>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <thead>
            <tr>
                <th title="全选"><input type="checkbox" id="check-all"/></th>
                <th>编辑</th>
                <th>栏目</th>
                <th>标题</th>
                <th>内容</th>
                <th>创建时间</th>
                <th>状态</th>
            </tr>
            </thead>

            <tbody id="tbody">
            <tr>
                <td><input type="checkbox" value="id"></td>
                <td>编辑1</td>
                <td>栏目1</td>
                <td>标题1</td>
                <td>内容1</td>
                <td>2022-11-22</td>
                <td><font color="#00CC99">已发布</font></td>
            </tr>
            <tr>
                <td><input type="checkbox" value="id"></td>
                <td>编辑2</td>
                <td>栏目2</td>
                <td>标题2</td>
                <td>内容2</td>
                <td>2022-11-22</td>
                <td><font color="#ff0000">未发布</font></td>
            </tr>
            </tbody>
        </table>
        <div id="paginate"></div>
    </div>
</div>
</body>
</html>